<template>
  <div>
    <a-card>
      <div class="charts" id="chart1"></div>
    </a-card>
    <a-card>
      <div class="charts" id="chart2"></div>
    </a-card>
  </div>
</template>

<script>
// 导入mixin文件
import mixin from "./mixin";
import moment from "moment";
import * as echarts from "echarts";
import { getAllCreditList, getCreditMonthList } from "@/api/CustomRequest";

export default {
  mixins: [mixin],
  name: "CreditMonthBillPage", // 每月信用卡账单 每月信用卡账单
  data() {
    return {
      lineChart: null,
      barChart: null,
      monthBillList: [],
      billList: [],
      category: {
        汽车交通: [""],
        普通餐饮: [""],
        人情往来: [""],
        医疗医药: [""],
        抖音消费: [""],
        // 抖音消费: [""],
      },
    };
  },
  mounted() {
    this.init();

    this.lineChart = echarts.init(document.getElementById("chart1"));
    this.barChart = echarts.init(document.getElementById("chart2"));

    this.getAllCreditList();
  },
  methods: {
    async getAllCreditList() {
      let data = await getAllCreditList();
      this.monthBillList = data;

      this.initLineView();

      let str = moment().format("YYYYMMDD");
      this.getCreditMonthList(str);
    },
    async getCreditMonthList(mm) {
      let m1 = mm.substring(0, 4);
      let m2 = mm.substring(4, 6);

      let data = await getCreditMonthList(m1, m2);
      this.billList = data;

      this.initPieView(m2);
    },
    initLineView() {
      let mlist = [];
      let mvlist = [];
      this.monthBillList.map((it) => {
        mlist.push(it.month);

        mvlist.push({
          name: it.month,
          value: it.billAmt,
        });
      });

      this.lineChart.setOption({
        title: {
          text: "月消费数据",
          textStyle: {
            color: "black", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "normal", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold", // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 1,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20, // 竖线的长度
          },
          data: mlist,
        },
        yAxis: {
          axisLabel: {
            show: true,
          },
        },
        series: [
          {
            type: "line", // 设置图表类型为柱状
            data: mvlist,
          },
        ],
      });

      let self = this;
      this.lineChart.on("click", function (params) {
        self.getCreditMonthList(params.name);
      });
    },
    initPieView(month) {
      let mlist = [];
      let mvlist = [];
      let mmap = {};

      this.billList.map((it) => {
        mlist.push(it.tranTypeDesc);

        if (
          it.tranTypeDesc == "其他支出" &&
          (it.transLog.includes("抖音支付") || it.transLog.includes("上海格物致品"))
        ) {
          it.tranTypeDesc = "抖音";
        }

        if (mmap[it.tranTypeDesc] == null) {
          mmap[it.tranTypeDesc] = it.consumeAmt;
        } else {
          mmap[it.tranTypeDesc] += it.consumeAmt;
        }
      });

      for (let key in mmap) {
        mvlist.push({
          name: key,
          value: mmap[key],
        });
      }

      mvlist = mvlist.sort((a, b) => a.value - b.value);

      this.barChart.setOption({
        title: {
          text: month + "月消费",
          textStyle: {
            color: "black", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "normal", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold", // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
        },
        series: [
          {
            type: "pie", // 设置图表类型为柱状
            data: mvlist,
            label: {
              normal: {
                show: true,
                formatter: "{b}:{c}({d}%)",
              },
            },
          },
        ],
      });

      // let self = this;
      this.barChart.on("click", function (params) {
        console.log(mvlist[params.dataIndex]);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.charts {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
</style>
